<template>
  <div class="main">
    <o-list :paths="docData.paths" :tags="docData.tags" :dis-doc-data.sync="disDocData"></o-list>
    <o-body :dis-doc-data.sync="disDocData" :definitions="docData.definitions" :base-url="docData.host + docData.basePath"></o-body>
  </div>
</template>
<script>
    import list from '../components/list'
    import body from '../components/body'
    import tools from '../lib/tools'
    export default {
        data() {
            return {
                docData: {},
                disDocData: {
                    responses: {
                        200: ''
                    }
                },
                responseData: {
                    curl: {},
                    requestUrl: {},
                    responseBody: {},
                    responseCode: '',
                    responseHeader: {}
                },
                requestData: {}
            }
        },
        route: {
            data() {
                this.getData(this.setDisData)
                this.$broadcast('route-change')
            }
        },
        ready() {},
        methods: {
            getData(fun) {
                var _self = this;
                if (sessionStorage.getItem('docData')) {
                    try {
                        _self.docData = JSON.parse(sessionStorage.getItem('docData'))
                        _self.docData.tags = _self.sortTags(_self.docData.tags)
                        _self.$nextTick(fun)
                        return
                    } catch (err) {
                        sessionStorage.setItem('docData', '')
                    }
                }
                this.$http.get('http://git.oschina.net/api/v5/swagger_doc.json')
                    .then(function(response) {
                        _self.docData = response.data
                        _self.docData.tags = _self.sortTags(_self.docData.tags)
                        sessionStorage.setItem('docData', JSON.stringify(_self.docData))
                        _self.$nextTick(fun)
                    })
            },
            sortTags(docTags){
                return docTags.sort((a,b)=>{
                    if(a.name === b.name){
                        return 0
                    }else if([a.name, b.name].sort()[0] === a.name){
                        return -1
                    }else{
                        return 1
                    }
                    
                })
            },
            setDisData() {
                if (this.operationId) {
                    let data = this.checkId(this.operationId)
                    console.log(data)
                    if (data) {
                        console.log(this.disDocData)
                        this.disDocData = data
                        return
                    }
                }
                this.$route.router.go({name: 'detail', params: { id: tools.getFirstChild(this.docData.tags[0].name, this.docData.paths).operationId}})
            },
            checkId(id) {
                for (let path in this.docData.paths) {
                    for (let method in this.docData.paths[path]) {
                        if (this.docData.paths[path][method].operationId === id) {
                            return this.docData.paths[path][method]
                        }
                    }
                }
                return false
            }
        },
        computed: {
            operationId() {
                return this.$route.params.id
            }
        },
        components: {
            'o-list': list,
            'o-body': body
        },
    }
</script>
<style lang="scss">
    html,
    body,
    ul,
    li {
        padding: 0;
        margin: 0;
    }
    
    html,
    body {
        background: #f8f8f8!important;
    }
    
    ul,
    li {
        list-style: none;
    }
    
    #app {
        width: 100%;
        height: 100%;
        position: absolute;
    }
    
    .main {
        width: 1000px;
        margin: 20px auto 20px auto;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -500px;
        min-height: 100%;
    }
</style>